<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">
    <script src="./rest.js"></script>
    <style>
        .input-group {
            margin-top: 10px;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user" name="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp; 码:</labal>
            <input type="password" class="pwd" name="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone" name="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp; 箱:</labal>
            <input type="text" class="email" name="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>

<script>
    var form = document.getElementsByTagName("form")[0]
    var { user: userInp, pwd: pwdInp, phone: phoneInp, email: emailInp } = document.getElementsByTagName("form")[0]

    var subBtn = document.getElementsByClassName("submit")[0]

    // 全局变量 记录验证的结果
    var isUserOk = false
    var isPwdOk = false
    var isPhoneOk = false
    var isEmailOk = false

    // var reg = /^[a-zA-Z_$][\w$]{5,11}$/

    // 拆分版 => 拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成  => 所有的字符都符合这个规则 / 存在不符合规则的字符(找一个)
    userInp.onchange = function () {
        isUserOk = false   //每次失焦 重新验证 => 重置为false
        var user = userInp.value
        // 去除所有空格
        user = user.replace(/\s/g, "")
        userInp.value = user
        var tipsSpan = this.nextElementSibling

        var lReg = /^.{6,12}$/  //任意字符 6-12
        var sReg = /^[^0-9]/  //非数字开头
        var zReg = /[^\w$]/  // 存在非法字符
        if (!isHaveName(user)) {
            // 排除所有的错误 => 剩余的就是对的
            if (!lReg.test(user)) { // 长度有误   lReg.test(user) ===false
                tipsSpan.textContent = "用户名需要在6-12位之间"
                tipsSpan.className = "user_tips error"
            } else if (!sReg.test(user)) { // 开头有问题 => 数字开头  sReg.test(user) === false
                tipsSpan.textContent = "用户名不能以数字开头"
                tipsSpan.className = "user_tips error"
            } else if (zReg.test(user)) { // 存在非法字符 zReg.test(user) === true 
                tipsSpan.textContent = "用户名由数字、字母、下划线、$组成"
                tipsSpan.className = "user_tips error"
            } else {
                tipsSpan.textContent = "√"
                tipsSpan.className = "user_tips right"
                isUserOk = true
            }
        } else {
            tipsSpan.textContent = "用户名已注册"
            tipsSpan.className = "user_tips error"
        }

    }


    pwdInp.onblur = function () {
        isPwdOk = false
        var pwd = pwdInp.value

        // 去除所有空格
        pwd = pwd.replace(/\s/g, "")
        pwdInp.value = pwd

        var reg = /^[\w$]{6,12}$/
        var tipsSpan = this.nextElementSibling
        if (reg.test(pwd)) {

            // 关于密码强度
            // 数字 大写字母 小写字母 _$ 四者  
            // 出现1种   1123123   asdasd   SDSDFFD  _______   弱
            // 出现2种   1123aaaa  1123AAAA  aaaaAAAA          中
            // 出现3种   1123aaaa  1123AAAA  aaaaAAAA          强
            // 出现4种   1123aaaa  1123AAAA  aaaaAAAA          超强

            var isExistNum = /[0-9]/.test(pwd)
            var isExistBig = /[A-Z]/.test(pwd)
            var isExistSmall = /[a-z]/.test(pwd)
            var isExistSpe = /[_$]/.test(pwd)

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe

            switch (level) {
                case 1:
                    tipsSpan.textContent = "密码强度:弱"
                    break
                case 2:
                    tipsSpan.textContent = "密码强度:中"
                    break
                case 3:
                    tipsSpan.textContent = "密码强度:强"
                    break
                case 4:
                    tipsSpan.textContent = "密码强度:超强"
                    break
            }
            tipsSpan.className = "pwd_tips right"
            isPwdOk = true
        } else {
            tipsSpan.textContent = "密码由数字、字母、下划线、$组成,6-12位"
            tipsSpan.className = "pwd_tips error"
        }

    }

    phoneInp.onblur = function () {
        isPhoneOk = false
        var phone = phoneInp.value

        // 去除所有空格
        phone = phone.replace(/\s/g, "")
        phoneInp.value = phone

        var reg = /^1[3-9]\d{9}$/
        var tipsSpan = this.nextElementSibling
        if (!isHavePhone(phone)) {
            if (reg.test(phone)) {
                tipsSpan.textContent = "√"
                tipsSpan.className = "phone_tips right"
                isPhoneOk = true
            } else {
                tipsSpan.textContent = "请输入正确的手机号"
                tipsSpan.className = "phone_tips error"
            }
        } else {
            tipsSpan.textContent = "电话号码已经被注册"
            tipsSpan.className = "phone_tips error"
        }

    }

    emailInp.onblur = function () {
        isEmailOk = false
        var email = emailInp.value

        // 去除所有空格
        email = email.replace(/\s/g, "")
        emailInp.value = email
        var reg = /^\w+@\w+\.\w+$/
        var tipsSpan = this.nextElementSibling

        if (!isHaveEmail(email)) {
            if (reg.test(email)) {
                tipsSpan.textContent = "√"
                tipsSpan.className = "email_tips right"
                isEmailOk = true
            } else {
                tipsSpan.textContent = "邮箱格式有误"
                tipsSpan.className = "email_tips error"
            }
        }
        else {
            tipsSpan.textContent = "邮箱已经被注册啦"
            tipsSpan.className = "email_tips error"
        }

    }


    subBtn.onclick = function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            var userName = userInp.value
            var pwd = pwdInp.value
            var phone = phoneInp.value
            var email = emailInp.value
            var userobj = {
                'userName': userName,
                'pwd': pwd,
                'phone': phone,
                'email': email
            }

            var userList = getCookie("userList")
            if (userList) {
                userList = JSON.parse(userList)
            } else {
                userList = []
            }
            userList.push(userobj)
            setCookie("userList", JSON.stringify(userList), 31 * 24 * 60 * 60)
            // location.href = './login.html'






        } else {
            alert("请填入完整信息")
        }
    }










    function isHaveName(username) {
        var userList = getCookie("userList")
        if (userList) {
            userList = JSON.parse(userList)
        } else {
            userList = []
        }
        return userList.some(item => item.userName == username);
    }
    function isHavePhone(phone) {
        var userList = getCookie("userList")
        if (userList) {
            userList = JSON.parse(userList)
        } else {
            userList = []
        }
        return userList.some(item => item.phone == phone);
    }


    function isHaveEmail(email) {
        var userList = getCookie("userList")
        if (userList) {
            userList = JSON.parse(userList)
        } else {
            userList = []
        }
        return userList.some(item => item.email == email);
    }


</script>